<template>
    <div class="commentDetail">
        <div class="backTop">
            <i class="iconfont icon-guanbi1" @click="back"></i>
            <p>查看</p>
            <!-- <Report/> -->
        </div>
        <div class="main">
            <div class="commentTop">
                <router-link :to="`/themself/${this.$route.query.landId}`">
                    <van-image 
                        width="1rem" 
                        height="1rem" 
                        radius="100%" 
                        fit="cover" 
                        :src="this.$route.query.landHead" 
                    />
                </router-link>
                <div class="nameTime">
                    <p>{{this.$route.query.landName}}</p>
                    <p>{{this.$route.query.landTime}}</p>
                </div>
            </div>
            <div class="content">
                {{this.$route.query.landContext}}
            </div>
            <div class="else">
                <h4>回复</h4>
                <p v-if="empty == true">无回复</p>
                <!-- 这是一条评论 -->
                <div   
                    class="comment"
                    v-for="(comment,index) in AComment"
                    :key="index"
                >
                    <van-image 
                        width="1rem" 
                        height="1rem" 
                        radius="100%" 
                        fit="cover" 
                        :src="comment.img"
                    />
                    <div class="mainComment">
                        <p>{{comment.nickname}}</p>
                        <p>{{comment.time}}</p>
                        <p>{{comment.context}}</p>
                    </div>
                    <button class="delBtn" v-if="comment.myself === true" @click="delFunc(comment.sonId)">删除</button>
                </div>
            </div>
        </div>
        <CommentButton ref="commentBtn" :isPost="isPost" :postUserId="this.$route.query.landId" :bodyId="$route.params.id" :bodyMessage="this.$route.query.landContext"/>
    </div>
</template>

<script>
import axios from 'axios'
import CommentButton from './CommentButton.vue'
import jwtDecode from 'jwt-decode'
import {Toast} from 'vant' 
export default {
    name:'CommentDetail',
    components:{
        CommentButton
    },
    data() {
        return {
            decoed:null,
            AComment:null,
            isPost:false,
            empty:false
        }
    },
    methods: {
        back(){
            window.history.go(-1);
        }, 
        changeComments(value){
            // console.log(value)
            this.AComment = value
            for(let i = 0;i < this.AComment.length;i++){
                if(this.AComment[i].userId == this.decode.userId){
                    this.AComment[i].myself = true
                }else{
                    this.AComment[i].myself = false
                }
            }
            this.Acomment = Object.assign({},this.AComment)
        },
        delFunc(sonId){
            let delParam = new URLSearchParams()
            delParam.append('sonId',sonId)
            delParam.append('userId',this.decode.userId)
            axios({
                url:'/praise/deleteSon',
                method:'delete',
                data:delParam
            }).then(data=>{
                if(data.data.code === 20000){
                    Toast('删除评论成功')
                    //再遍历子评论 这里应该不用遍历了，但是我不会
                    axios({
                        url:'/praise/findSonComment',
                        method:'get',
                        params:{
                            commentId:this.$route.params.id,
                        }
                    }).then(data=>{
                        this.AComment = data.data.data
                        for(let i = 0;i < this.AComment.length;i++){
                            if(this.AComment[i].userId == this.decode.userId){
                                this.AComment[i].myself = true
                            }else{
                                this.AComment[i].myself = false
                            }
                        }
                        this.Acomment = Object.assign({},this.AComment)
                    }).catch(err=>{
                        console.log(err)
                    })
                }
                // console.log(data)
            }).catch(err=>{
                console.log(err)
            })
        }
    },
    updated(){
        let ele = document.getElementsByClassName('main')[0];
        ele.scrollTop = ele.scrollHeight;
    },
    mounted() {
        let token=sessionStorage.getItem("token")
        this.decode = jwtDecode(token);
        //注册自定义事件
        this.$refs.commentBtn.$on('changeComments',this.changeComments)
        //查询所有的子评论
        axios({
            url:'/praise/findSonComment',
            method:'get',
            params:{
                commentId:this.$route.params.id,
            }
        }).then(data=>{
            let res = data.data.data
            // console.log(res)
            this.AComment = res
            if(res.length === 0){
                this.empty = true
            }else{
                for(let i = 0;i < this.AComment.length;i++){
                    if(this.AComment[i].userId == this.decode.userId){
                        this.AComment[i].myself = true
                    }else{
                        this.AComment[i].myself = false
                    }
                }      
                this.empty = false
            }
        }).catch(err=>{
            console.log(err)
        })
    },
    beforeRouteLeave(to, from, next) {
        // 设置下一个路由的 meta
        to.meta.keepAlive = true; // 设置下一个路由开启缓存
        next()
    },
}
</script>

<style lang="less" scoped>
.commentDetail{
    display: flex;
    flex-direction: column;
    height: 100vh;
    .backTop{
        display: flex;
        font-size: 0.4rem;
        // justify-content: space-between;
        margin: 0.2rem 0.3rem;
        p{
            flex: 1;
            text-align: center;
        }
    }
    .main{
        flex: 1;
        overflow-y: scroll;
        .commentTop{
            display: flex;
            margin: 0.2rem 0.3rem;
            .nameTime{
                margin-left: 0.2rem;
                p{
                    &:nth-child(1){
                        color: #696969;
                        font-size: 0.25rem;
                    }
                    &:nth-child(2){
                        color: #cac8c8;
                        font-size: 0.2rem;
                        margin-top: 0.1rem;
                    }
                }
            }
        }
        .content{
            margin: 0.3rem;
        }
        .else{
            background-color: #fafafa;
            h4{
                text-indent: 0.3rem;
                font-weight: 300;
                padding: 0.2rem 0;
                font-size: 0.35rem;
            }
            .comment{
                margin: 0.3rem;
                display: flex;
                border: none;
                border-radius: 0 !important;
                border-bottom: solid 1px #aaaaaa;
                .mainComment{
                    flex: 1;
                    margin-left: 0.2rem;
                    p{
                        &:nth-child(1){
                            color: #696969;
                            font-size: 0.25rem;
                        }
                        &:nth-child(2){
                            color: #bdbdbd;
                            font-size: 0.2rem;
                            margin-top: 0.1rem;
                        }
                        &:nth-child(3){
                            color: black;
                            margin: 0.3rem 0;
                        }
                    }
                }
            }
        }
    }

}
.delBtn{
    background-color: #eeeeee;
    color: #666666;
    outline: none;
    border: none;
    padding: 0.1rem 0.2rem;
    align-self: center;
}
</style>